<template>
	<div class="date-pickers">
			<!-- :shortcuts="SHORTCUTS" -->
		<el-date-picker
			v-model="record_time"
			:style="style"
			@visible-change="dataChange"
			:type="type"
			:range-separator="range"
			:start-placeholder="mark1"
			:end-placeholder="mark2"
			:format="format"
			:value-format="valueFormat"
			:clearable="clearable"
		/>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { SHORTCUTS } from '@/config/youfu'

const props = defineProps({
	style: {
		type: String,
		default: 'width: 300px'
	},
	type: {
		type: String,
		default: 'datetimerange'
	},
	range: {
		type: String,
		default: '-'
	},
	mark1: {
		type: String,
		default: '请选择开始时间'
	},
	mark2: {
		type: String,
		default: '请选择结束时间'
	},
	format: {
		type: String,
		default: 'YYYY/MM/DD HH:mm'
	},
	valueFormat: {
		type: String,
		default: 'YYYY/MM/DD HH:mm'
	},
	clearable: {
		type: Boolean,
		default: true
	},
	oneprop: {
		type: Boolean,
		default: false
	}
})

// 编辑器change事件触发
const emit = defineEmits(['timeChange'])

const record_time: any = ref([])
// 选择时间范围
const dataChange = (e: any) => {
	// console.log(e);
	// console.log(record_time.value);
	// return
	// console.log(e);
	if(!e && record_time.value){
		let start = record_time.value[0]+':00'
		let end = record_time.value[1]+':00'
		if(end.indexOf('00:00:00') != -1){
			record_time.value[1] = record_time.value[1].replace(/00:00/g,'23:59')
			end = end.replace(/00:00:00/g,'23:59:59')
		}
		if(props.oneprop){
			emit('timeChange',start+','+end)
		}else{
			emit('timeChange',[start,end])
		}
	}else{
		if(props.oneprop){
			emit('timeChange','')
		}else{
			emit('timeChange',['',''])
		}
	}
}
const clear = () => {
	record_time.value = []
}
defineExpose({
	clear
})
</script>
<style lang="scss" scoped>
.date-pickers {
	width: 100%;
}
</style>
